<template>
	<section class="todoapp">
    <Header :arr="list"></Header>
		<Main :arr="shoelist" @del="delfn"></Main>
		<Footer :arr="list" @delfn="delbtn" @change="changefn"></Footer>
	</section>
</template>

<script>
   import Header from './components/TodoHeader.vue'
	 import Main from './components/TodoMain.vue'
	 import Footer from './components/TodoFooter.vue'
	// 样式引入 + 导入组件并注册使用
  import './styles/base.css'
	import './styles/index.css'

	export default {
		data() {
			return {
				type:'',
				list: JSON.parse(localStorage.getItem('todos')) || [],
			};
		},
		components: {
			Header,
			Main ,
			Footer
		},
		computed: {
			shoelist(){
				if(this.type === 'active'){
					return this.list.filter(item => !item.isDone)
				}else if(this.type === 'complete'){
					return this.list.filter(item => item.isDone)
				}else {
					return this.list
				}
			}
		},
   methods: {
		delfn(id){
			return  this.list = this.list.filter(item => item.id !== id)
		},
		delbtn(){
			return this.list =  this.list.filter(item => !item.isDone)
		},
		changefn(type){
       this.type = type
		}
	 },
	 watch: {
		list:{
			deep:true,
			handler(){
				localStorage.setItem('todos',JSON.stringify(this.list))
			}
		}
	}
	};
</script>
